import './user.css'
import { Button, ConfigProvider, Pagination, Modal, Select, message,Empty } from 'antd';
import { SearchOutlined, PlusSquareOutlined} from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';
import { useState,useEffect } from 'react'
import { getUser, createUser, deleteUser, selectIfId, updataCole } from '../../api/index'
const { Option } = Select;
function User() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisibleUser, setIsModalVisibleUser] = useState(false);
    const [isModalVisibleModify, setIsModalVisibleModify]=useState(false)
    const [username,setUsername]=useState("")
    const [password,setPassword]=useState("")
    const [list,setList]=useState([])
    const [id, setId] = useState("")
    const [index, setIndex] = useState("")
    const [inpId,setInpId]=useState("")
    const [inp2,setInp2]=useState("")
    const [cole,setCole]=useState("")
    const [updataid,setUpdataid]=useState("")
    const [page,setPage]=useState(1)
    const [pageSize,setPageSize]=useState(10)
    const [total,setTotal]=useState("")
    useEffect(()=>{
        getUser().then(data=>{
            let pagelist = data.slice(((page - 1) * pageSize), ((page - 1) * pageSize)+pageSize)
            setTotal(data.length)
            setList(pagelist)
        })
    }, [page, pageSize])
    const onChange = (pagenum, pageSizenum) => {
        setPage(pagenum)
        setPageSize(pageSizenum)
    };
    //删除菜单
    const showModalUser = (id, index) => {
        setId(id)
        setIndex(index)
        setIsModalVisibleUser(true)
    }
    const handleOkUser=()=>{
        setIsModalVisibleUser(false)
        let list1=list
        list1.splice(index,1)
        setList(list1)
        setTotal(total-1)
        deleteUser({id}).then(data=>{
            message.success("删除成功！")
        })
    }
    const handleCancelUser=()=>{
        setIsModalVisibleUser(false)
    }
    //修改菜单
    const showModalModify = (username,id) => {
        setIsModalVisibleModify(true)
        setInp2(username)
        setUpdataid(id)
    }
    const handleOkModify = () => {
        setIsModalVisibleModify(false)
        if (inp2.length<2){
            message.info("用户名至少需要2位数字或字母和特殊符号")
            return
        }
        if (cole=="") {
            message.info("请选择角色")
            return
        }
        updataCole({ updataid, cole, inp2}).then(data=>{
            if(data.msg=="修改成功") {
                getUser().then(data=>{
                    let pagelist = data.slice(((page - 1) * pageSize), ((page - 1) * pageSize) + pageSize)
                    console.log(pagelist)
                    setList(pagelist)
                    message.success("修改成功！")
                })
            }
        }).catch(err=>{
            console.log(err)
        })
    }
    const handleCancelModify = () => {
        setIsModalVisibleModify(false)
    }
    //新增菜单
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        setIsModalVisible(false);
        if (username.length<2){
            message.info("用户名至少需要2位数字或字母和特殊符号或中文")
            return
        }
        if (password.length<6){
            message.info("密码至少需要6位数字或字母和特殊符号")
            return
        }
        createUser({username,password}).then(data=>{
            if(data.msg="添加成功") {
                getUser().then(data => {
                    let pagelist = data.slice(((page - 1) * pageSize), ((page - 1) * pageSize) + pageSize)
                    setTotal(data.length)
                    setList(pagelist)
                    message.success("添加成功")
                })
            }
        }).catch(err=>{
            console.log(err)
        })
        setUsername("")
        setPassword("")
    };
    const handleCancel = () => {
        setIsModalVisible(false);
        console.log('取消')
        setUsername("")
        setPassword("")
    };
    //查询
    const handerInpId=()=>{
        if(inpId!="") {
            selectIfId({ id: inpId }).then(data => {
                if (data.length == 0) {
                    setList([])
                } else {
                    setList(data)
                }
            })
            setInpId("")
        }else{
            message.info("请输入需要查询的id")
        }
    }
    //角色
    const handleChange = (value) => {
        console.log(value)
        setCole(value)
    };
    return (
        <div className="User">
            <div className="header">
                <input type="text" placeholder='请输入用户ID' value={inpId} onChange={(e) => { setInpId(e.target.value) }} />
                <Button className='btn' icon={<SearchOutlined />} onClick={handerInpId} >查询</Button>
                <Button className='btn1' icon={<PlusSquareOutlined />} onClick={showModal} >新增用户</Button>
                <Modal  title="新增用户" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <form className='header-user' action="">
                        <div>
                            用户名：<input type="text" placeholder='请输入用户名' value={username} onChange={(e) => { setUsername(e.target.value) }}  />
                        </div>
                        <div>
                            密<span style={{ opacity: "0" }}>字</span>码：<input type="text" placeholder='请输入密码' value={password} onChange={(e) => { setPassword(e.target.value) }} />
                        </div>
                    </form>
                </Modal>
            </div>
            {
                list.length==0?
                <>
                        <Empty />
                </>:
                <>
                        <div className="subject">
                            <ul>
                                <li>用户ID</li>
                                <li>用户名</li>
                                <li>创建时间</li>
                                <li>过期时间</li>
                                <li>员工ID</li>
                                <li>角色</li>
                                <li>操作</li>
                            </ul>
                            {
                                list.map((item, index) => {
                                    return (
                                        <ul key={item.id}>
                                            <li>{item.id}</li>
                                            <li>{item.username}</li>
                                            <li>{item.createTime.slice(0, 10)}</li>
                                            <li>{item.expireTime.slice(0, 10)}</li>
                                            <li>{item.person}</li>
                                            <li>{item.role}</li>
                                            <li><button onClick={() => { showModalUser(item.id, index) }}>删除</button > 
                                            <button onClick={() => { showModalModify(item.username,item.id) }}>修改</button></li>
                                        </ul>
                                    )
                                })
                            }
                            <Modal title="删除" visible={isModalVisibleUser} onOk={handleOkUser} onCancel={handleCancelUser}>
                                <h2>是否删除</h2>
                            </Modal>
                            <Modal title="修改" visible={isModalVisibleModify} onOk={handleOkModify} Modify onCancel={handleCancelModify}>
                                <form className='header-user' action="">
                                    <div>
                                        用户名：<input type="text" placeholder='请输入用户名' value={inp2} onChange={(e)=>{setInp2(e.target.value)}} />
                                    </div>
                                    <div>
                                        角&nbsp; &nbsp; 色：<Select defaultValue="请选择" style={{ width: 120,height:32 }} onChange={handleChange}>
                                                                <Option value="员工">员工</Option>
                                                                <Option value="管理员">管理员</Option>
                                                                <Option value="超级管理员">超级管理员</Option>
                                                            </Select>
                                    </div>
                                </form>
                            </Modal>
                        </div>
                        <div className="footer">
                            <ConfigProvider locale={zhCN}>
                                <Pagination
                                    total={total}
                                    showSizeChanger
                                    showQuickJumper
                                    onChange={onChange}
                                    showTotal={(total) => `共${total}条`}
                                />
                            </ConfigProvider>
                        </div>
                </>
            }
        </div>
    )
}

export default User